<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link href="https://cdn.bootcss.com/materialize/1.0.0-alpha.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!--<form id="login-form">-->
    <!--用户名: <input name="user"/>-->
    <!--密码: <input name="pass"/>-->
    <!--<button type="button" onclick="login()">登录</button>-->
<!--</form>-->

<div class="row container">
    <form class="col s12" id="login-form">
        <div class="row">
            <div class="input-field col s12">
                <input id="user" name="user" type="text">
                <label for="user">用户名</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12">
                <input id="pass" name="pass" type="password">
                <label for="pass">密码</label>
            </div>
        </div>

        <div class="row">
            <a class="waves-effect waves-light btn right" onclick="login()">登录</a>
        </div>
    </form>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>
<script>
    (function init() {

    }())

    function login() {
        console.log('登录')

        $.ajax({
            url: '/login',
            method: 'POST',
            data: $('#login-form').serialize(),
        }).then(res => {
            res = JSON.parse(res)
            //console.log('登录信息: '+JSON.stringify(res))
            if (res.result == 'success') {
                console.log('登陆成功')
                window.location = '/index.html'
                return
            }

            console.log('登录失败: ' + JSON.stringify(res))
            alert('登录失败请重试')
        })
    }
</script>
</body>
</html>